<!--
 * @Author: your name
 * @Date: 2022-03-02 09:03:51
 * @LastEditTime: 2022-03-03 09:23:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue\myapp\src\components\itemThree.vue
-->
<template>
  <div>
    <h2>库存统计</h2>
    <div class="chart" id="myEcharts">

    </div>
  </div>
</template>

<script>
import {inject,onMounted,reactive} from 'vue'
export default {
  setup() {
    let $echarts=inject('echarts')
    let $http=inject('axios')

    let data=reactive({})

    async function getState(){
      data=await $http({url:'/three/data'})
    }
    onMounted(()=>{
      getState().then(()=>{
         let myChart=$echarts.init(document.getElementById('myEcharts'))
         myChart.setOption({
           legend:{
             top:'bottom'
           },
           tooltip:{
             show:true
           },
           series:[{
             type:'pie',
             data:data.data.chartThree.chartData,
             radius:[10,100],
             center:['50%','45%'],
             roseType:'area',
             itemStyle:{
               borderRadius:10
             }
           }]
         })
      })
    })
    return{
      getState,data
    }
  }
}
</script>

<style>
.chart{
  height: 4.5rem;
}
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>